﻿@page "/listviews"
@inject WebsiteOptions WebsiteOption

<h3>ListView 列表视图</h3>

<h4>提供规则排列控件</h4>

<Block Title="普通用法" Introduction="适用于大量重复的数据实现规则排列" CodeFile="listview.1.html">
    <p>点击图片时触发 <code>OnListViewItemClick</code> 事件</p>
    <div class="listview-demo">
        <ListView TItem="Product" Items="@Products" OnListViewItemClick="OnListViewItemClick">
            <HeaderTemplate>
                <div>产品列表</div>
            </HeaderTemplate>
            <BodyTemplate>
                <Card>
                    <CardBody>
                        <img src="@context.ImageUrl" />
                        <div class="listview-demo-desc">@context.Description</div>
                    </CardBody>
                </Card>
            </BodyTemplate>
            <FooterTemplate>
                <div class="text-right">
                    Coptyright Bootstrap Blazor
                </div>
            </FooterTemplate>
        </ListView>
    </div>
    <Logger @ref="Trace" class="mt-3" />
</Block>

<Block Title="分页显示" Introduction="设置 <code>Pageable</code> 显示分页组件" CodeFile="listview.2.html">
    <div class="listview-demo">
        <ListView TItem="Product" Pageable="true" OnQueryAsync="@OnQueryAsync">
            <HeaderTemplate>
                <div>产品列表</div>
            </HeaderTemplate>
            <BodyTemplate>
                <Card>
                    <CardBody>
                        <img src="@context.ImageUrl" />
                        <div class="listview-demo-desc">@context.Description</div>
                    </CardBody>
                </Card>
            </BodyTemplate>
        </ListView>
    </div>
</Block>

<Block Title="分组显示" Introduction="设置 <code>GroupName</code> 数据进行分组显示" CodeFile="listview.3.html">
    <div class="listview-demo">
        <ListView TItem="Product" GroupName="@(p => p.Category)" OnQueryAsync="@OnQueryAsync">
            <HeaderTemplate>
                <div>产品列表</div>
            </HeaderTemplate>
            <BodyTemplate>
                <Card>
                    <CardBody>
                        <img src="@context.ImageUrl" />
                        <div class="listview-demo-desc">@context.Description</div>
                    </CardBody>
                </Card>
            </BodyTemplate>
        </ListView>
    </div>
</Block>

<AttributeTable Items="GetAttributes()"></AttributeTable>

<MethodTable Items="GetMethods()"></MethodTable>
